<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>测试异步函数</button>
    <script>
      // 异步函数 不会阻塞 主线程代码的执行
      // console.log('top') // 1
      // // 异步函数
      // setTimeout(() => {
      //   console.log('mid') // 3
      // }, 100)
      // console.log('bottom') // 2

      // document.querySelector('button').onclick = function () {
      //   console.log('ajax-top') // 1
      //   // 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
      //   let xhr = new XMLHttpRequest()
      //   // 2.设置请求的 地址 和方法
      //   // 没有params属性,需要自行拼接
      //   xhr.open(
      //     'get',
      //     'http://ajax-api.itheima.net/api/robot?spoken=你好,吃饱了没?'
      //   )
      //   // 3.注册回调函数 服务器响应内容回来之后触发
      //   xhr.addEventListener('load', function () {
      //     // response 响应
      //     console.log(xhr.response)
      //     console.log('ajax-mid') // 3
      //   })
      //   // 4.发送请求
      //   xhr.send()
      //   console.log('ajax-bottom') // 2
      // }

      /*
      1. 1秒之后打印1
      2. 1打印之后,等待2秒打印2
      3. 2打印之后,等待3秒打印3
      */
      // setTimeout(() => {
      //   console.log(1)
      //   setTimeout(() => {
      //     console.log(2)
      //     setTimeout(() => {
      //       console.log(3)
      //     }, 3000)
      //   }, 2000)
      // }, 1000)

      // ajax嵌套
      document.querySelector('button').onclick = function () {
        // 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
        let xhr = new XMLHttpRequest()
        // 2.设置请求的 地址 和方法
        // 没有params属性,需要自行拼接
        xhr.open(
          'get',
          'http://ajax-api.itheima.net/api/robot?spoken=你好,吃饱了没?'
        )
        // 3.注册回调函数 服务器响应内容回来之后触发
        xhr.addEventListener('load', function () {
          // response 响应
          console.log(xhr.response)
          // 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
          let xhr1 = new XMLHttpRequest()
          // 2.设置请求的 地址 和方法
          // 没有params属性,需要自行拼接
          xhr1.open(
            'get',
            'http://ajax-api.itheima.net/api/robot?spoken=不饱去吃饭呀!'
          )
          // 3.注册回调函数 服务器响应内容回来之后触发
          xhr1.addEventListener('load', function () {
            // response 响应
            console.log(xhr1.response)
            // 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
            let xhr2 = new XMLHttpRequest()
            // 2.设置请求的 地址 和方法
            // 没有params属性,需要自行拼接
            xhr2.open(
              'get',
              'http://ajax-api.itheima.net/api/robot?spoken=渴了和东鹏特饮!'
            )
            // 3.注册回调函数 服务器响应内容回来之后触发
            xhr2.addEventListener('load', function () {
              // response 响应
              console.log(xhr2.response)
              // 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
              let xhr3 = new XMLHttpRequest()
              // 2.设置请求的 地址 和方法
              // 没有params属性,需要自行拼接
              xhr3.open(
                'get',
                'http://ajax-api.itheima.net/api/robot?spoken=困了就喝藿香正气水!'
              )
              // 3.注册回调函数 服务器响应内容回来之后触发
              xhr3.addEventListener('load', function () {
                // response 响应
                console.log(xhr3.response)
              })
              // 4.发送请求
              xhr3.send()
            })
            // 4.发送请求
            xhr2.send()
          })
          // 4.发送请求
          xhr1.send()
        })
        // 4.发送请求
        xhr.send()
      }
    </script>
  </body>
</html>
